In this post, you will learn how to make a Password Strength Indicator or Checker using HTML, CSS and JavaScript.
Password Strength Indicator is used to find if a the entered password is weak, average or strong.
It is a simple JavaScript Project. This Password Indicator looks good on all types of devices. The Indicator is displayed display in different colors and tell you whether the password is weak, medium and strong with their different colors
This project is easy and don't take much time either. Watch full video tutorial to create this Password Strength Checker
Video Tutorial for Creating a Password Strength Checker
I hope you've watched the above video tutorial till the end and understood the code logic used behind password checker. If you have any doubts, feel free to ask me in the comments.
If your code doesn't work or you've faced any problems, please download the source code files from my blog post. It is free and a zip file will be downloaded that contains the project folder with source code files
Password Strength Checker in JavaScript [Source Codes]
To create a Password Strength Indicator using HTML, CSS and JavaScript
Create a folder. After naming the folder, create the files mentioned below inside this folder.
Create a index.html file. The Created file must have either .html or .htm extension, as it declares that this file is an HTML document. This is where we will write the structure of our document.
Paste the below code into this html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Password Strength Indicator using JavaScript - Alins Code</title> <!-- CSS Style Sheet Link --> <link rel="stylesheet" href="style.css"> </head> <body> <div class="input"> <input type="password" placeholder="Password" id="password"/> <button id="btn" type="submit"><i class="fa-solid fa-arrow-right"></i></button> <p id="message">This Password is <span id="strength"></span></p> </div> <!-- JavaScript File Link --> <script src="main.js"></script> <!-- Enter Fontawesome Icon Link Here --> </body> </html>
Create a style.css file. The Created file must have .css extension, as it declares that this file is an CSS file. This is where we will write code to make our project look beautiful.
Paste the below code into this css file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
width: 100%;
min-height: 100Vh;
background: #131d23;
display: flex;
align-items: center;
justify-content: center;
}
.input{
position: relative;
width: 90%;
max-width: 400px;
}
input{
background: transparent;
height: 50px;
width: 100%;
border: 1px solid white;
padding: 0 50px 0 10px;
font-size: 18px;
color: white;
font-weight: 500;
}
::placeholder{
color: #ccc;
}
#btn{
background: white;
width: 30px;
height: 30px;
border: none;
position: absolute;
right: 10px;
top: 10px;
border-radius: 50%;
}
#message{
color: white;
margin-top: 8px;
font-weight: 500;
position: absolute;
display: none;
}
Create a main.js file. The Created file must either .js extension, as it declares that this file is an JavaScript file. This is where we will write the logic of our project.
Paste the below code into this javascript file
let pass = document.getElementById("password");
let msg = document.getElementById("message");
let str = document.getElementById("strength");
let btn = document.getElementById("btn");
pass.addEventListener("input", () => {
if (pass.value.length > 0) {
msg.style.display = 'block';
}
else{
msg.style.display = 'none';
}
if (pass.value.length < 4){
str.innerHTML = "Weak";
str.style.color = 'red';
pass.style.borderColor = 'red';
btn.style.background = 'red';
}
else if (pass.value.length >= 4 && pass.value.length < 10) {
str.innerHTML = "Medium";
str.style.color = 'yellow';
pass.style.borderColor = 'yellow';
btn.style.background = 'yellow';
}
else if (pass.value.length >= 10) {
str.innerHTML = "Strong";
str.style.color = 'lime';
pass.style.borderColor = 'lime';
btn.style.background = 'lime';
}
else if(pass.value.length = 0){
pass.style.borderColor = 'white';
btn.style.background = 'white';
}
})
Once you created these files, link the CSS and JavaScript to the HTML file. If you don't want to do these then scroll down and download the source of this Password Strength Checker project by clicking on the given download button
That's all, now you've successfully created a Password Strength Checker using HTML, CSS and JavaScript. If your code doesn't work or you've faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.
Password Indicator in JavaScript.zip
JavaScript Project
1.57MB
.zip